//通过id判断
const did = window.sessionStorage.getItem('did')
if(!did){
    alert('获取失败')
    window.location.href="./index.html"
}

init()

function init() {

    clientBox()
    searchKeyword()
    leftMenu()
    bindHotSale();
    actions()
    selectorWrap();
    //点击回到首页
    toIndex()
}

function clientBox() {
    const clientServer = document.querySelector('.menu2 >ul')
    pAjax({
        url: 'https://www.lemall.com/api/news/footerNews.html',
        dataType: 'json'
    }).then(res => {
        let str = '';
        res.data.forEach(item => {
            str += `
        <li><a>${ item.name}</a></li>
`
        })
        clientServer.innerHTML = str;
    })
}

function searchKeyword() {
    const hotwords = document.querySelector('.hotwords')
    pAjax({
        url: 'https://www.lemall.com/api/searchKeyword.html',
        dataType: 'json'
    }).then(res => {
        let str = ``;
        str += `
        <b>热门搜索:</b>
        <div>
        `
        //????
        res.data.forEach(item => {
            str += `
                <a>${item}</a>
                `
        })
        str += `</div>`;
        hotwords.innerHTML = str;
    })
}

function leftMenu() {
    const indexGate = document.querySelector('.leftmenu>ul')
    pAjax({
        url: 'https://www.lemall.com/api/indexCate.html',
        dataType: 'json'
    }).then(res => {
        let str = '';
        res.data.cateList.forEach(item => {
            str += `
                <li>
                <a>${item.name}</a>
                <b>></b>
                <div class="nextmenu">
                <dl>
                `
            item.childs.forEach(item => {
                str += `
                    <dt>
                        <a>${item.name}</a>
                        <span>></span>
                    </dt>
                    `
                str += `
                        <dd>`
                item.childs.forEach(item => {
                    str += `
                            <a>${item.name}</a>
                  
                    `
                })
                str += `  </dd>
                    `
            })
            str += `
                        </dl>
                     </div>
                     </li>
                     `
        })
        indexGate.innerHTML = str;
    })
}

function actions() {
    const allGoods = document.querySelector(".leftmenu")
    const allGoodsBtn = document.querySelector('.navigator .first')
    const icon = document.querySelector('.navigator .first>i')
    allGoodsBtn.addEventListener('mouseover', () => {
        allGoods.classList.add("active")
        icon.classList.add("active")
    })
    allGoodsBtn.addEventListener('mouseout', () => {
        allGoods.classList.remove("active")
        icon.classList.remove("active")
    })
}

//以上是通用部分

let height = 0

function bindHotSale() {
    const saleBox = document.querySelector('.salebox')
    pAjax({
        url: 'https://www.lemall.com/api/cateTop.html',
        data: {
            cateId: did
        },
        dataType: 'json'
    }).then(res => {
        if(!res.success) window.location.href="./index.html"
        let str = ``;
        let str1 = ``;
        const leftBox = document.querySelector('.showleft>ul')
        res.data.forEach(item => {
            str += `
            <li class="item" data-did="${item.id}">
                    <a>
                        <img src="${item.masterImg}" alt="">
                    </a>
                    <a class="last">
                        <p>${item.name1}</p>
                        <p><span>特价</span><span>￥${item.mallPcPrice}</span></p>
                        <p>立即抢购</p>
                    </a>
                </li>
            `
            str1 += `
            <li data-did="${item.id}">
                <a><img src="${item.masterImg}" alt=""></a>
                <p><span>特价:</span> <i>￥${item.mallPcPrice}</i></p>
                <h3><a>${item.name1}</a></h3>
            </li>
            `
        })
        saleBox.innerHTML = str;
        leftBox.innerHTML = str1;
        clickEvents(saleBox)
        clickEvents(leftBox)
    })

    //此处渲染了 筛选菜单的数据
    pAjax({
        url: 'https://www.lemall.com/api/productlist.html',
        data: {
            visitPath: `list-${did}-1-0-0-0-0-0-0-0`
        },
        dataType: 'json'
    }).then(res => {
        let str = ``;
        let titles = ``;
        
        const navBox = document.querySelector('.list>.nav')
        titles += `
        <div class="nav">
        <div class="first-level">
            <a>${res.data.productCate.name}</a>
            <i>></i>
        </div>
        <div class="nav-item">
            <div class="trigger">
                <span class="trigger-name">${res.data.productCatePid.name}</span>
                <b></b>
                <ul class='dropmenu'>
                `
        res.data.productCate2s.forEach(item => {
            titles += `
                    <li data-did="${item.id}"><a>${item.name}</a></li>
                    `
        })

        titles += `
                </ul>
            </div>
            <i>></i>
        </div>
        <div class="nav-item">
         <div class="trigger">
             <span class="trigger-name">${res.data.productCatePidPid.name}</span>
             <b></b>
             <ul class='dropmenu'>
                 ` 
        res.data.productCate3s.forEach(item => {
            titles += `
                    <li data-did="${item.id}"><a>${item.name}</a></li>
                    `
        })
        titles += `
             </ul>
         </div>
         <i>></i>
        </div>
        </div>
        `
        navBox.innerHTML = titles;

        //翔哥优化过的 
        const selectorBox = document.querySelector('.selector-box')
        for (let i = 0; i < res.data.productTypeAttrVOs.length; i++) {
            str += `
                <li data-did="${res.data.productTypeAttrVOs[i].id}">
                <div class="left"><span>${res.data.productTypeAttrVOs[i].name}:</span></div>
                <div class="right">
                    <ol>
                    `
            res.data.productTypeAttrVOs[i].values.forEach(item => {
                str += `
                        <li data-keys='${item}'><a>${item}</a></li>
                       `
            })
            str += `
                    </ol>
                </div>
            </li>
            `
        }
        selectorBox.innerHTML = str;
        [...selectorBox.children].slice(0, 3).forEach(item => {
            height += item.offsetHeight
        })
        selectorBox.style.height = height + 'px'


        let show=``;
        const mainBox = document.querySelector('.main-item')
        res.data.producListVOs.forEach(item=>{
            show+=`
            <li data-did='${item.id}'>
            <img src="${item.masterImg}" alt="">
            <h2>${item.name1}</h2>
            <h3>￥${item.mallPcPrice}</h3>
            <p>
                <a class="toDetails" data-did='${item.id}'>查看详情</a>
                <a class="toShopCart" data-did='${item.id}'>加入购物车</a>
            </p>
       </li>
            `;
        })
        mainBox.addEventListener('click',e=>{
            if(e.target.className==="toDetails"){
                window.sessionStorage.setItem('did',e.target.dataset.did)
                window.location.href="./details.html"
            }
            if(e.target.className==="toShopCart"){
                const goodsId = e.target.dataset.did -0
                toShopCart(goodsId);
            }
        })
        mainBox.innerHTML=show;
        mainBox.innerHTML=show;
    })
}

function selectorWrap() {
    const selectBoxList = document.querySelector('.selector-box')
    const wrapBtn = document.querySelector('#wrap')

    wrapBtn.addEventListener('click', e => {
            selectBoxList.classList.toggle('active')
            wrapBtn.classList.toggle('active')
    })
}


function clickEvents(box){
    box.addEventListener('click',e=>{
        window.sessionStorage.setItem("did",e.target.dataset.did)
        window.location.href="./details.html"
    })
}
function toIndex(){
    const logoBox= document.querySelector('.logo')
    logoBox.addEventListener('click',()=>{
        window.location.href="./index.html"
    })
}